<template>
  <div class="container">
    <!-- 表格 -->
    <BaseTable :table-data="tableData" />
    <!-- 分页 -->
    <el-pagination
      align="right"
      background
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="prev, pager, next,total, sizes, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import { getTableData } from '@/api'
export default {
  name: 'EditData',
  components: { BaseTable },
  data() {
    return {
      currentPage: 2, // 分页当前页
      tableData: []
    }
  },
  mounted() {
    getTableData().then(res => {
      const { list } = res.data
      this.tableData = list
    })
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>

<style lang="scss" scoped>
.container {
  padding: 5px;
  .el-pagination {
  padding: 10px 50px;
}
}
</style>
